/*
下拉列表item组件模板
 export default class ComboBoxItem extends cc.Component {
    @property({ type: cc.Label, tooltip: '显示文本' })
	label: cc.Label = null;

	private cb: ComboBox = null;// 下拉框
	private index: number = 0;// 下标
    // 初始化下拉框
   	initComboBox(cb: ComboBox, index: number) {
		this.cb = cb;
		this.updateIndex(index);
	}
    
    // 更新文本
	updateIndex(index: number) {
		this.index = index;
	}

	onCallback(event: cc.Event, customEventData: string) {
		if (this.cb) {
			this.cb.comboBoxClicked();
			this.cb.setIndex(customEventData, this.index);
		}
	}  
 } 
 
 */

import TouchNode from "./TouchNode";

interface ItemType{
	title:string,
	data:any
}

const { menu, ccclass, property } = cc._decorator;
@ccclass
@menu("自定义插件/下拉列表框")
export default class ComboBox extends cc.Component {
	@property({ type: cc.Node, tooltip: '三角形' })
	triangle: cc.Node = null;
	@property({ type: cc.Node, tooltip: '可展示框' })
	dropDown: cc.Node = null;
	@property({ type: cc.Node, tooltip: '内容' })
	content: cc.Node = null;
	@property({ type: cc.Label, tooltip: '显示文本' })
	lblText: cc.Label = null;
	@property({ type: cc.Node, tooltip: '下拉列表item' })
	item: cc.Node = null;

	private _isDropDown: boolean = false;
	private _callBack:(userData:any)=>void = null;

	onLoad() {
		this.dropDown.active = false;
		
		const _TouchNode = this.node.addComponent(TouchNode);
		_TouchNode.zoomScale = 1;
		const clickEventHandler = new cc.Component.EventHandler();
		clickEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
		clickEventHandler.component = "ComboBox";// 这个是代码文件名
		clickEventHandler.handler = "onDropDownClicked";
		_TouchNode.clickEvent = clickEventHandler;
	}

	public setData(datas:{title:string,idx:number}[],cb:(idx:number)=>void) {
        if (!datas || datas.length < 1) return ;

		this._callBack = cb;
		this.content.removeAllChildren();
		this.dropDown.height = datas.length*(this.item.height+5);
        datas.forEach((data)=>{
			let it = cc.instantiate(this.item);
			it.getComponent(cc.Label).string = data.title;
			it.parent = this.content;
			it.height += 5;
			let touch = it.getComponent(TouchNode);
			!touch && (touch = it.addComponent(TouchNode));
			touch.zoomScale = 1;
            const clickHandler = new cc.Component.EventHandler();
            clickHandler.target = it; // 这个 node 节点是你的事件处理代码组件所属的节点
            clickHandler.component = "ComboBox";// 这个是代码文件名
            clickHandler.handler = "onSelectClicket";
            clickHandler.customEventData = `${data.title}|${data.idx}`;
            touch.clickEvent = clickHandler;
        });
	}

	onSelectClicket(_,customEventData:string){
		this.lblText.string = customEventData;
		this._callBack && this._callBack(parseInt(customEventData));
	}

	// 更新 Items
	updateItems() {
	}

	// 设置下标
	setIndex(txt:string,index?: number) {
		this.lblText.string = txt || '';
	}

	// 下拉框显示与隐藏
	onDropDownClicked() {
		this.dropDown.active = this._isDropDown = !this._isDropDown;
		let rotateAction = this._isDropDown ? cc.rotateTo(0.5, 180) : cc.rotateTo(0.5, 270);
		this.triangle.runAction(rotateAction.easing(cc.easeCubicActionOut()));
	}
}